<template>
    <div class="app">
        <!-- 编译路径解析 -->
        <img class="img1" src="../public/imgs/film.jpg" alt="">
        <div class="div1" ></div>
        <hr>
        <!-- 不编译路径解析 -->
        <!-- <div class="div2" style="background-image:url('../public/imgs/film.jpg')"></div> -->
        <!-- 上述解决办法 -->
        <div class="div2" style="background-image:url('./imgs/film.jpg')"></div>
        <img class="img1" :src="imgSrc" alt="">
        <hr>
        <img class="img1" src="../public/imgs/5-121204193935-51.gif" alt="">
        <img class="img1" src="../public/imgs/u=1878125254,116198046&fm=11&gp=0.jpg" alt="">
    </div>
</template>
<script>
export default {
    data(){
        return{
            // imgSrc:"../public/imgs/film.jpg"
            imgSrc:"./imgs/film.jpg"
        }
    }
}
</script>
<style>
    .img1{
        width:200px;
        height:100px;
    }
    .div1{
        width:200px;
        height:200px;
        background-image:url("../public/imgs/film.jpg");
        background-size:cover;
    }
    .div2{
        width:200px;
        height:200px;
    }
</style>